<template>
  <div>
    <h2>学生预测数据</h2>
    <div v-if="loading">加载中...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="predictions && predictions.length">
      <div v-for="(prediction, index) in predictions" :key="index">
        <h3>课程: {{ prediction.courseName }}</h3>
        <p>出勤率: {{ prediction.attendanceRate }}</p>
        <p>作业完成率: {{ prediction.homeworkCompletionRate }}</p>
        <p>预测结果: {{ prediction.prediction }}</p> <!-- 显示 "挂科" 或 "没挂科" -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      predictions: [],
      loading: false,
      error: null,
    };
  },
  created() {
    this.fetchPredictionData();
  },
  methods: {
    async fetchPredictionData() {
      const studentName = localStorage.getItem('honey-user'); // 从 localStorage 获取学生姓名

      if (!studentName) {
        this.error = "无法获取学生姓名";
        return;
      }

      this.loading = true;
      try {
        const response = await this.$axios.get(`/api/analysis/predictions/name/${studentName}`);
        this.predictions = response.data; // 假设返回的数据格式为数组
      } catch (err) {
        this.error = "获取预测数据失败";
        console.error(err);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.error {
  color: red;
}
</style>
